<template>
  <div>
    <div style="background: #fff; padding-bottom: 5px">
      <headerXX :name="title"></headerXX>
      <div style="background: #fff">
        <van-search
          @search="onSearch"
          @clear="onCancel"
          :showAction="false"
          placeholder="请输入订单号后五位"
          v-model="GetDD.orderNumber"
          shape="round"
        ></van-search>
      </div>
      <van-tabs
        v-model:active="active"
        color="rgb(0, 186, 173)"
        title-active-color="rgb(0, 186, 173)"
        @click="Tabclick"
      >
        <van-tab v-for="(item, index) in list" :title="item.name"> </van-tab>
      </van-tabs>
    </div>
    <div>
      <van-pull-refresh
        class="pull-refresh"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-empty
          v-if="goodList.length == 0 && !error"
          image="search"
          description="未找到数据"
        />
        <van-empty v-if="error" image="error" description="网络错误" />
        <van-list
          :immediate-check="false"
          v-model:loading="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="(item, index) in goodList"
            :key="index"
            @click="TZXQ(item)"
          >
            <div class="lost_title_list">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 70%">
                  <div class="title">
                    <van-image
                      radius="4"
                      class="img"
                      :src="require('../imgs/DDmc.png')"
                      width="16px"
                      height="16px"
                      mode="widthFix"
                    ></van-image>
                    <div style="margin-left: 5px">
                      {{ item.orderType }}
                    </div>
                  </div>
                </div>
                <div class="ZTimg" v-if="GetDD.orderStatus == '-1,0,1,2,3,4'">
                  <van-image
                    v-if="item.orderStatus == 0"
                    radius="4"
                    class="img"
                    :src="require('../imgs/SY.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == -1"
                    radius="4"
                    class="img"
                    :src="require('../imgs/QX.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 2"
                    radius="4"
                    class="img"
                    :src="require('../imgs/SH.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 1"
                    radius="4"
                    class="img"
                    :src="require('../imgs/WC.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-image
                    v-if="item.orderStatus == 3"
                    radius="4"
                    class="img"
                    :src="require('../imgs/PJ.png')"
                    width="67px"
                    height="21px"
                    mode="widthFix"
                  ></van-image>
                  <van-tag
                    class="img BHtag"
                    v-if="item.orderStatus == 4"
                    type="primary"
                    color="#ffe1e1"
                    text-color="#ad0000"
                  >
                    <p class="yuan"></p>
                    已驳回
                  </van-tag>
                  <!-- 	<u--image v-if="item.orderStatus==3" radius="4" class="img"
										:src="''" width="67px" height="21px"
										mode="widthFix"></u--image>
			
								<u--image v-if="item.orderStatus==1&&item.verification!='evaluate'" radius="4" class="img"
									:src="require('../imgs/WC.png')" width="67px" height="21px"
									mode="widthFix"></u--image>
								
								<u--image v-if="item.verification=='evaluate'&&item.orderStatus==1" radius="4" class="img" :src="''" width="67px"
									height="21px" mode="widthFix"></u--image> -->
                </div>
                <!-- <div style="width: 125px;height: 125px;">
								<u--image radius="4" class="img" :src="item.img" width="125px" height="125px"
									mode="widthFix"></u--image>
							</div> -->
              </div>
              <div class="lost_title">
                <div class="lost_title1">姓 名</div>
                <div class="XX">：{{ item.userName }}</div>
              </div>
              <div class="lost_title">
                <div class="lost_title1">下单时间</div>
                <div class="XX">：{{ item.creationTime }}</div>
              </div>
              <div class="lost_title">
                <div class="lost_title1">订 单 号</div>
                <div class="XX">：{{ item.orderNumber }}</div>
              </div>

              <div class="lost_title" v-if="item.orderStatus == 2">
                <div class="lost_title1">申请内容</div>
                <div class="XX">：取消该订单</div>
              </div>
              <div class="lost_title" v-if="item.orderStatus == 4">
                <div class="lost_title1">驳回原因</div>
                <div class="XX">：{{ item.orderExtend1 }}</div>
              </div>
              <van-divider
                :style="{
                  borderColor: '#999',
                  margin: '15px 0',
                }"
                v-if="item.orderStatus == 0 || item.orderStatus == 2"
              />
              <div style="display: flex; justify-content: space-between">
                <div class=""></div>
                <div
                  style="display: flex; width: 100%; justify-content: flex-end"
                >
                  <div
                    style="width: 100%"
                    v-if="
                      (title == '洗车服务' ||
                        title == '上门保洁列表' ||
                        title == '就医服务') &&
                      item.orderStatus == 1 &&
                      GetDD.orderStatus != '-1,0,1,2,3,4'
                    "
                  >
                    <van-divider v-if="GetDD.orderStatus != '-1,0,1,2,3,4'" />
                    <div
                      style="
                        display: flex;
                        width: 100%;
                        justify-content: flex-end;
                      "
                    >
                      <van-button
                        size="small"
                        @click.stop="SCPZ(item, '上传凭证')"
                        style="
                          border: none;
                          color: #fff;
                          width: 100px;
                          margin: 0 5px;
                        "
                        type="primary"
                        color="#f9ae3d"
                        :text="
                          item.verification == 'evaluate'
                            ? '修改凭证'
                            : '上传凭证'
                        "
                      ></van-button>
                    </div>
                  </div>
                  <van-button
                    size="small"
                    @click.stop="TY(item, '取消订单')"
                    v-if="item.orderStatus == 0"
                    style="
                      border: none;
                      color: rgb(56, 56, 56);
                      width: 100px;
                      margin: 0 5px;
                    "
                    :hairline="false"
                    color="rgb(229, 229, 229)"
                    text="取消订单"
                  ></van-button>
                  <van-button
                    size="small"
                    @click.stop="TY(item, '完成订单')"
                    v-if="item.orderStatus == 0"
                    style="border: none; width: 100px; margin: 0 5px"
                    :hairline="false"
                    type="primary"
                    text="完成订单"
                  ></van-button>
                  <van-button
                    size="small"
                    @click.stop="TY(item, '同意申请')"
                    v-if="item.orderStatus == 2"
                    style="
                      border: none;
                      color: #fff;
                      width: 100px;
                      margin: 0 5px;
                    "
                    :hairline="false"
                    color="rgb(54, 194, 168)"
                    text="同意申请"
                  ></van-button>
                  <van-button
                    size="small"
                    @click.stop="BH(item, '驳回申请')"
                    v-if="item.orderStatus == 2"
                    style="
                      border: none;
                      color: #fff;
                      width: 100px;
                      margin: 0 5px;
                    "
                    :hairline="false"
                    type="warning"
                    text="驳回申请"
                  ></van-button>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
      <div class="BHxx"></div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="BHobj.orderExtend1"
            rows="2"
            autosize
            label="驳回原因"
            type="textarea"
            maxlength="50"
            placeholder="请输入驳回原因"
            show-word-limit
            :rules="[{ required: true, message: '请输入驳回原因' }]"
          />
          <!-- <van-field
           maxlength="50"
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          /> -->
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { Dialog, Notify } from "vant";
import headerXX from "../../components/title.vue";
import { getpersonalInformation } from "../../common/RYXX";
import {
  getServiceOrderAdminList,
  updateServiceOrderAdmin,
  updateServiceOrderAdminNot,
} from "@/api/realAssets/icsharedstation/DD/index.js";
export default {
  components: { headerXX },
  data() {
    return {
      goodList: [],
      siteId: "",
      title: "",
      active: 0,
      id: "",
      ZT: "",
      orderType: "",
      showTC: false,
      show: false,
      titleSH: "",
      contentNr: "",
      finished: false,
      error: false,
      loading: false,
      refreshing: false,
      BHobj: {
        orderStatus: "4",
        orderExtend1: "",
        id: "",
      },
      DDdetail: "",
      list: [
        {
          name: "待使用",
          value: "0",
        },
        {
          name: "已取消",
          value: "-1",
        },
        {
          name: "已完成",
          value: "1,3",
        },
        {
          name: "待审核",
          value: "2",
        },
        {
          name: "全部",
          value: "-1,0,1,2,3,4",
        },
      ],
      GetDD: {
        userId: JSON.parse(getpersonalInformation()).userId,
        orderTime: "",
        orderNumber: "",
        orderStatus: "0", //-1已取消，0待使用，1已完成（待评价），2待审核
        siteId: "",
        pageNumber: 0,
        pageSize: 10,
        postId: JSON.parse(getpersonalInformation()).postId,
      },
    };
  },
  created() {
    this.title = this.$route.query.siteName;
    if (this.title == "上门保洁") {
      this.title = "上门保洁列表";
    }
    this.siteId = this.$route.query.siteId;
    if (
      this.title == "洗车服务" ||
      this.title == "上门保洁列表" ||
      this.title == "就医服务"
    ) {
      this.list.forEach((item) => {
        if (item.name == "已完成") {
          item.name = "凭证";
        }
      });
    }
    if (this.siteId == "9999") {
      this.GetDD.orderTime = "";
      this.siteId = "";
    } else {
      this.GetDD.orderTime = "";
    }
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    //跳转详情
    TZXQ(val) {
      let li = encodeURIComponent(JSON.stringify(val));
      if (val.orderType == "疗养登记") {
        // router.push({
        //   name: "i_life_lydj_orderDetail",
        //   query: {
        //     YYXQxx: li,
        //   },
        // });
      } else {
        this.$router.push({
          name: "rvicsharedstation-AdminPages_DDXQ_index",
          query: {
            YYXQxx: li,
          },
        });
        // router.push({
        //   name: "i_life_AdminPages_DDXQ",
        //   query: {
        //     YYXQxx: li,
        //   },
        // });
      }
      // router.push(`/pages/AdminPages/CLHX/index?YYXQxx=${DDdetail.value}`);
    },
    //确认驳回
    onSubmit() {
      updateServiceOrderAdminNot(this.BHobj).then((res) => {
        this.show = false;
        Notify({ type: "success", message: "驳回成功" });
        this.onRefresh();
      });
    },
    BH(val) {
      console.log(val);
      Dialog.confirm({
        title: "驳回订单",
        message: `正在驳回订单，订单号为【${val.orderNumber}】的订单`,
      })
        .then(() => {
          this.show = true;
          this.BHobj.id = val.id;
          // updateServiceOrderAdmin({
          //   serviceType: orderType.value,
          //   orderStatus: "-1",
          //   id: id.value,
          // }).then((res) => {
          //   Notify({ type: "success", message: "核销成功" });
          //   onRefresh();
          // });
        })
        .catch(() => {
          // on cancel
        });
    },
    TY(val, name) {
      this.DDdetail = encodeURIComponent(JSON.stringify(val));
      this.ZT = name;
      this.id = val.id;
      this.orderType = val.orderType;
      if (this.ZT == "同意申请") {
        Dialog.confirm({
          title: "确认审核",
          message: `正在同意审核，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "-1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "核销成功" });
              this.onRefresh();
            });
          })
          .catch(() => {
            // on cancel
          });
      }
      if (this.ZT == "完成订单") {
        Dialog.confirm({
          title: "完成订单",
          message: `正在完成订单，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "订单完成" });
              this.onRefresh();
            });
          })
          .catch(() => {
            // on cancel
          });
      }
      if (this.ZT == "取消订单") {
        Dialog.confirm({
          title: "取消订单",
          message: `正在取消订单，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            // on confirm
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "-1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "取消成功" });
              this.onRefresh();
            });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    SCPZ(val, name) {
      this.DDdetail = encodeURIComponent(JSON.stringify(val));
      this.$router.push({
        name: "rvicsharedstation-AdminPages_CLHX_index",
        query: {
          YYXQxx: this.DDdetail,
        },
      });
    },
    Tabclick(val) {
      this.GetDD.orderStatus = this.list[val].value;
      this.onRefresh();
      // $refs.paging.reload()
    },
    onLoad() {
      this.loading = true;
      this.GetDD.siteId = this.siteId;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.goodList = [];
      }
      getServiceOrderAdminList(this.GetDD).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.goodList = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.goodList = [];
          this.finished = true;
        } else {
          this.goodList = [...this.goodList, ...res.data];
          // goodList.value = res.data;
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.goodList.length == res.pageNum) {
          this.finished = true;
        } else {
          this.GetDD.pageNumber++;
        }
        this.refreshing = false;
      });
    },
    // 下拉刷新
    onRefresh() {
      //   list.value = [];
      this.GetDD.pageNumber = 1;
      this.GetDD.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },

    // 点击重试
    retryLoad() {
      this.error = false;
      this.loading = true;
      this.onLoad();
    },
    //清空搜索
    onCancel() {
      // console.log(XXyz.value.districtName);
      // XXyz.value.districtName = "";
      this.onRefresh();
    },
    //按键触发
    onSearch() {
      this.onRefresh();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
// @import "../../static/css/GYcSS.less";
.BHxx {
  text-align: center;
  font-size: 18px;
  margin: 10px 0;
}
.BHtag {
  width: 70px;
  height: 25px;
  box-sizing: border-box;
  overflow: hidden;
  // padding: 3px;
  .yuan {
    width: 5px;
    height: 5px;
    background: #ad0000;
    border-radius: 50%;
    margin: 0px 3px;
    margin-right: 8px;
  }
}
.pull-refresh {
  height: calc(
    var(--real-vh, 1vh) * 100 - 150px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
  padding-top: 10px;
  box-sizing: border-box;
}
// /deep/ .u-tabs__wrapper__nav {
// 	justify-content: space-around;
// 	height: 80rpx;

// 	//这个是为了让代码块均匀分布
// }

// /deep/ .u-tabs__wrapper__nav__line {
// 	left: 0;
// 	//这个是为了让元素恢复原位
// }

// /deep/ .u-tabs__wrapper__nav__item {
// 	flex: 1;
// 	//经过查看源码得知，下划线之所以错位，是因为每一个子盒子加起来并没有撑满整个盒子，所以当下划线取定位的时候，就会发生错位，因为两个子盒子宽度无法沾满整个盒子，所以就需要flex：1来沾满盒子。
// }

.lost_title_list {
  width: 95%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 5px;
  //background-color: #f0f0f0;
  position: relative;
  // line-height: 80rpx;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;

  .title {
    font-size: 18px;
    display: flex;
    color: rgb(0, 186, 173);
    align-items: center;
    // margin-bottom: 10px;
    letter-spacing: 2px;
  }

  .name {
    color: rgb(56, 56, 56);
  }

  .XX {
    color: rgb(56, 56, 56);
    font-size: 13px;
  }

  // @include respond-to('phone') {
  // 	margin-bottom: 25rpx;
  // 	padding: 10px;
  // }

  // @include respond-to('android') {

  // 	padding: 20px;
  // }

  .lost_title {
    color: rgb(56, 56, 56);
    display: flex !important;
    flex-direction: row;
    // align-content: center;
    align-items: center;
    font-size: 13px;
    line-height: 25px;

    .lost_title1 {
      width: 80px;
      text-align-last: justify;
      // margin-left: 5px;
    }
  }

  .lost-right {
    position: absolute;
    right: 5px;
    bottom: 10px;
    width: 30%;
    height: 100px;

    .lost-btn {
      background: rgba(2, 117, 113, 1);
      width: 50px;
      height: 30px;
      color: #ffffff;
      text-align: center;
      line-height: 20px;
      border-radius: 5px;
      margin-top: 5px;
    }
  }
}
.van-search {
  background: none;
}
</style>